<template>
    <div :style="styleColor" style="padding:0 5px">
        <div class="head">
            <div class="left">
                <img class="headerIMG" src="@/assets/images/bigViewIMG2/bluejiantou.png" alt="">
                <span>供应链档案</span>
            </div>
            <!-- <div class="right" @click="jump">
                <span>详情</span>
                <img class="imgJT" src="@/assets/images/bigViewIMG2/jiantou.png" alt="">
            </div> -->
        </div>
        <div style="color:#fff;font-size:30px;line-height: 300px;">待开发。。。</div>
        <!-- <div id="relationMap" ref="relationMap" style="width: 100%; height: 350px"></div> -->
    </div>
   
</template>

<script>
import { encrypt, decrypt } from '@/utils/AES.js'
import echarts from 'echarts'

import {reqFindSupplyChain}from '@/api/home/index.js'

export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data(){
        return {
            options: {},
            relationMapData:{
                ownerNameSet :[],//收货单位
                agentNameSet :[],// 报关单位
                jwqyNameSet :[],// 境外发货人
                rmbPriceTotalAll:'',
                totalScpreAll:'',

            }
        }
    },
    computed: {
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    created(){
        // this.getList()
    },
    mounted() {
        this.options = this.value
        this.$nextTick(() => {
            // this.initChart();
        });
        
    },
    watch:{
        relationMapData:{
            deep:true,
            handler(val){
                // this.setOptions(val);
            }
        },
         $route: {
            handler(val) {
                if (val.query.reportCode == "SecondView") {
                // this.getList()
                } else {
                return
                }


            },
            deep: true
        }
    },
    methods:{
        jump(){
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.$router.push({
                path: '/visual/thirdView/relationView',
                query: {
                    key: encrypt(JSON.stringify({
                        company: query.company,
                         text: '供应链档案',
                          tradeCo: query.tradeCo
                    }))
                }
            })
        },
        async getList() {
            let query = JSON.parse(decrypt(this.$route.query.key))
           
            const res=await reqFindSupplyChain({ tradeCo: query.tradeCo })
            if(res.code==200){
                this.relationMapData=res.data
                
            }
             this.chart.hideLoading();
        },
        initChart() {
         
            this.chart = echarts.init(document.getElementById('relationMap'), null, { renderer: 'svg' });
             this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.relationMapData);
        },
        setOptions(data){
             let query = JSON.parse(decrypt(this.$route.query.key))
            var newData=data
           
            var colors = [
                "#D96600",
                "#00B3D9",
                "#D9C400",
                "#604BFF",
               
            ];
            var getdata = function getData() {
                let list = []
                list.push( newData.ownerNameSet )
                list.push(newData.agentNameSet)
                list.push( newData.jwqyNameSet )
               
                let data = {
                    name:query.company,
                    value: 0,
                    children: [],
                };
                let secondList = ['收货单位', '报关单位','境外发货人']
                for (let i = 0; i <= list.length-1 ;i++) {
                    let obj = {
                        name: secondList[i],
                        value: i,
                        children: [],
                    };
                    
                    for (let j = 0; j <= list[i].length-1; j++) {
                        // console.log(i)
                        let obj2 = {
                            // name: `行业-${i}-${j}`,
                            name: list[i][j].fullName,
                            value: 1 + "-" + i + "-" + j,
                        };
                        // if (j % 2 == 1) {
                        //     obj2.children = [];
                        //     for (let k = 1; k <= 3; k++) {
                        //         let obj3 = {
                        //             name: `行业-${i}-${j}-${k}`,
                        //             value: 1 + "-" + i + "-" + j + "-" + k,
                        //         };
                        //         obj2.children.push(obj3);
                        //     }
                        // }

                        obj.children.push(obj2);
                    }

                    data.children.push(obj);
                }
                let arr = [];
                arr.push(data);
                //
                arr = handle(arr, 0);
                // 	console.log(arr);
                return arr;
            };

            var handle = function handleData(data, index, color = "#004CFF") {
                //index标识第几层
                return data.map((item, index2) => {
                   
                    //计算出颜色
                    if (index == 1) {
                        color = colors.find((item, eq) => eq == index2 % 10);
                    }

                    // 让文字换行
                    if(item.name){
                        // console.log(item)
                        var newParamsName = '';
                        var paramsNameNumber = item.name.length;
                        var provideNumber = 4; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = item.name.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = item.name.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = item.name;
                        }
                        item.name=newParamsName 	
                    }
                    // 设置节点大小
                    if (index === 0 || index === 1) {
                        item.label = {
                            position: "inside",
                            //   rotate: 0,
                            //   borderRadius: "50%",
                        };
                    }
                    // 设置label大小
                    switch (index) {
                        case 0:
                            item.symbolSize =80;
                            break;
                        case 1:
                            item.symbolSize = 70;
                            break;
                        default:
                            item.symbolSize = 50;
                            break;
                    }
                    // 设置线条颜色
                    item.lineStyle = { color: color };

                    if (item.children) {
                        //存在子节点
                        item.itemStyle = {
                            borderColor: color,
                            color: color,
                        };
                        item.children = handle(item.children, index + 1, color);
                    } else {
                        //不存在
                        item.itemStyle = {
                            color: color,
                            borderColor: color,
                        };
                    }
                    return item;
                });
            };
            this.chart.setOption({
                type: "tree",
                // backgroundColor: "#000",
                toolbox: {
                    //工具栏
                    show: true,
                    iconStyle: {
                        borderColor: "",
                    },
                    feature: {
                        restore: {},
                    },
                },
                tooltip: {
                    show:false,
                    //提示框
                    trigger: "item",
                    triggerOn: "mousemove",
                    // backgroundColor: "rgba(1,70,86,1)",
                    // borderColor: "rgba(0,246,255,1)",
                    borderWidth: 0.5,
                    textStyle: {
                        fontSize: 10,
                    },
                },
                series: [
                    {
                        type: "tree",
                        hoverAnimation: true, //hover样式
                        data: getdata(),
                        top: 0,
                        bottom: 0,
                        left: 0,
                        right: 0,
                        layout: "radial",
                        symbol: "circle",
                        symbolSize: 10,
                        nodePadding: 20,
                        animationDurationUpdate: 750,
                        expandAndCollapse: true, //子树折叠和展开的交互，默认打开
                        initialTreeDepth: 2,
                        roam: true, //是否开启鼠标缩放和平移漫游。scale/move/true
                        focusNodeAdjacency: true,
                        itemStyle: {
                            borderWidth: 1,
                        },
                        

                        label: {
                            //标签样式
                            color: "#fff",
                            fontSize: 12,
                            fontFamily: "SourceHanSansCN",
                            position: "inside",
                            rotate: 0,
                        
                            // formatter: function (val) {
                            //     // console.log("label汉字--", val);
                            //     // var strs = val.split(''); //字符串数组
                            //     // var str = ''
                            //     // for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                            //     //     str += s;
                            //     //     if (!(i % 4)) str += '\n'; //按需要求余
                            //     // }
                            //     console.log(val)
                            //     return val
                            // }

                        },
                        lineStyle: {
                            width: 1,
                            curveness: 0.5,
                        },
                    },
                ],
            })
        }

    }
}
</script>

<style scoped lang="scss">
.head {
    // padding: 0 5px;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .left {
        display: flex;
        align-items: center;

        .headerIMG {
            width: 40px;
            height: 40px;
        }

        span {
            color: #fff;
            margin-left: 10px;
            font-size: 15px;
        }
    }

    .right {
        cursor: pointer;
        display: flex;
        margin-right: 10px;
        align-items: center;

        span {
            color: #fff;
            font-size: 15px;
        }

        .imgJT {
            margin-left: 10px;
            width: 12px;
            height: 12px;
        }
    }
}
</style>


		
